<template>

  <el-tabs type="card" v-model="activeName" @tab-click="">

    <!--    <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>-->
    <el-tab-pane label="试题管理" name="first">

      <!--      试题列表-->
      <div v-if="this.questionView==false">
        <div class="main">
          <div class="topBlock">
            <el-button @click="" size="medium" icon="el-icon-plus"
                       style="margin-left: 0px; "></el-button>
            <el-button @click="" size="medium" icon="el-icon-delete-solid"></el-button>
          </div>
          <div class="table">

            <el-table
                :header-cell-style="{'border': 'none',textAlign:'center'}"
                :cell-style="{'border': 'true',textAlign:'center',}"
                :data="paperList"
                style="width: 100%">

              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="试卷描述">
                      <span>{{ props.row.paperDesc }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column type="index" label="序号"/>
              <el-table-column label="试卷标题" prop="paperTitle"/>
              <!--            <el-table-column label="试卷概览"  prop="paperDesc"/>-->
              <el-table-column label="单选题" prop="paperInfo.singleNum"/>
              <el-table-column label="多选题" prop="paperInfo.multipleNum"/>
              <el-table-column label="填空题" prop="paperInfo.fillInNum"/>
              <el-table-column label="简答题" prop="paperInfo.textNum"/>
<!--              <el-table-column label="状态">-->
<!--                <template slot-scope="scope">-->
<!--                  <div v-if="scope.row.paperStatus==1">已启用</div>-->
<!--                  <div v-if="scope.row.paperStatus==0">未启用</div>-->
<!--                </template>-->
<!--              </el-table-column>-->
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button-group>
                    <el-button @click="previewQuestions(scope.row);getQuestionsIndex()" size="mini" type="primary"
                              icon="el-icon-view" >预览
                    </el-button>
                    <!--                  <el-button @click="deleteById(scope.row.id)" size="mini" icon="el-icon-delete">删除</el-button>-->
                  </el-button-group>
                </template>
              </el-table-column>


            </el-table>


            <!--          <el-descriptions v-for="(item) of paperList" style="margin-left: 0px;margin-top: 30px" size="medium" >-->
            <!--            <template v-slot:title>-->
            <!--              <div class="custom-title">{{ item.paperTitle }}</div>-->
            <!--            </template>-->
            <!--            <el-descriptions-item label="试卷信息">{{ item.paperDesc }}</el-descriptions-item>-->
            <!--          </el-descriptions>-->
          </div>

        </div>
        <div class="footers">

        </div>
      </div>

      <!--   style="overflow-y: auto"   预览试卷内容-->
      <div v-else>

        <el-page-header @back="previewPaper" style="font-size: 7px;" content="预览试卷"/>
        <!--          试卷标题-->
        <div style="font-size: 28px;font-weight: bolder;font-family: 宋体;color: #000000;margin-top: 30px">
          {{ this.paper.paperTitle }}
        </div>
        <!--        试题信息-->
        <div style="width: 100%; height: 40px">
          <span></span>
        </div>

<!--    单选题-->
        <div style="width: 100%;text-align: start">
            <span style="font-size:18px;font-weight: bold;font-family: 宋体;color: #000000">
              一、选择题：本题共{{ paper.paperInfo.singleNum }}小题，每小题5分，共{{ paper.paperInfo.singleNum * 5 }}分，
              在每小题给出的四个选项中，只有一项是符合要求的。
            </span>
        </div>
        <!--单选题题目列表-->
        <div class="singleList" style="width: 100%;text-align: start; margin-top: 35px"
             v-for="(question,index) of singleList">
          <!--            题目标题--> <span style="display: none">{{ String.fromCharCode(index + 65) }}</span>
          <span style="font-size: 19px; line-height: 30px ">{{ index + 1 }}.{{ question.questionTitle }}</span>
          <!--          题目选项-->
          <div style="display: flex; font-size: 18px;margin-top: 15px;line-height: 24px ;align-items: center; " v-for="(choice,index) of question.paperQuestionChoiceList">
            <span>{{ preChoice[index] }}. {{ choice.choiceText }}</span>
            <template v-if="answerFlag">
              <template v-for="(answer,index) of question.paperQuestionAnswerList">
                <template  > <img v-show="answer.answerText==choice.choiceOrder" style="margin-left: 10px"  src="../../../../assets/ic_public_todo_filled.png"></template>
              </template>
            </template>
          </div>
        </div>

<!--        多选题-->
        <div  style="width: 100%;text-align: start; margin-top: 65px ">
            <span style="font-size:18px;font-weight: bold;font-family: 宋体;color: #000000">
              二、多选题：本题共{{ paper.paperInfo.multipleNum }}小题，每小题5分，共{{ paper.paperInfo.multipleNum * 5 }}分。
              在每小题给出的选项中，有多项符合题目要求，全部选对的得5分，部分选对的得2分，有选错的不得分。
            </span>
        </div>
        <!--多选题题目列表-->
        <div class="multiList" style="width: 100%;text-align: start; margin-top: 35px" v-for="(question,index) of multiList">
          <!--题目标题-->
          <!--String.fromCharCode(index + 65)  用于建立索引-->
          <span style="display: none">{{ String.fromCharCode(index + 65) }}</span>
          <span style="font-size: 19px; line-height: 30px ">{{ index + 1 }}.{{ question.questionTitle }}</span>
          <!--          题目选项-->
          <div style="display: flex; font-size: 18px;margin-top: 15px;line-height: 24px ;align-items: center;" v-for="(choice,index) of question.paperQuestionChoiceList">
            <span>{{ preChoice[index] }}. {{ choice.choiceText }}</span>
            <template v-if="answerFlag">
              <template v-for="(answer,index) of question.paperQuestionAnswerList">
                <template  > <img v-show="answer.answerText==choice.choiceOrder" style="margin-left: 10px"  src="../../../../assets/ic_public_todo_filled.png"></template>
              </template>
            </template>

          </div>
        </div>

<!--        填空题-->
        <div  style="width: 100%;text-align: start; margin-top: 65px ">
            <span style="font-size:18px;font-weight: bold;font-family: 宋体;color: #000000">
              三、填空题：本题共{{ paper.paperInfo.fillInNum }}小题，每小题5分，共{{ paper.paperInfo.fillInNum * 5 }}分。
              错误则不得分。
            </span>
        </div>
        <!--填空题题目列表-->
        <div class="fillInList" style="width: 100%;text-align: start; margin-top: 35px" v-for="(question,index) of fillInList">
          <!--题目标题-->
          <!--String.fromCharCode(index + 65)  用于建立索引-->
          <span style="display: none">{{ String.fromCharCode(index + 65) }}</span>
          <span style="font-size: 19px; line-height: 30px ">{{ index + 1 }}.{{ question.questionTitle }}</span>

          <!--          无题目选项-->
          <div style="width: 100%;height: 20px;margin-top: 10px">
            <template v-if="answerFlag">
              <template v-for="(answer,index) of question.paperQuestionAnswerList">
                <template> <span style=" color: #67C23A ; margin-right: 10px;font-family: 微软雅黑"> ({{index+1}}). {{ answer.answerText }} </span></template>
              </template>
            </template>
          </div>
        </div>

<!--     简答题-->
        <div  style="width: 100%;text-align: start; margin-top: 65px ">
            <span style="font-size:18px;font-weight: bold;font-family: 宋体;color: #000000">
              四、简答题：本题共{{ paper.paperInfo.textNum }}小题，每小题10分，共{{ paper.paperInfo.textNum * 10 }}分。

            </span>
        </div>
        <!--简答题题目列表-->
        <div class="textList" style="width: 100%;text-align: start; margin-top: 35px" v-for="(question,index) of textList">
          <!--题目标题-->
          <!--String.fromCharCode(index + 65)  用于建立索引-->
          <span style="display: none">{{ String.fromCharCode(index + 65) }}</span>
          <span style="font-size: 19px; line-height: 30px ">{{ index + 1 }}.{{ question.questionTitle }}</span>
          <!--          无题目选项-->
          <div style="width: 100%;height: 20px;margin-top: 10px">
            <template v-if="answerFlag">
              <template v-for="(answer,index) of question.paperQuestionAnswerList">
                <template> <span style=" color: #67C23A ; margin-right: 10px;font-family: 微软雅黑"> ({{index+1}})： {{ answer.answerText }} </span></template>
              </template>
            </template>
          </div>
        </div>


<!--        悬浮导航框-->
        <div class="floatMenu" >
          <div class="menuParam">
            <el-switch style="margin-left: 23px" v-model="menuFlag" active-text="试题导航">
            </el-switch>
            <el-switch style="margin-right:23px" v-model="answerFlag" active-text="显示答案">
            </el-switch>
          </div>
          <div v-show="menuFlag" class="menuMain">
<!--            单选题-->
            <div
                style="overflow-y: auto;margin-left:20px;width: 100%; height: 40px; display: flex;align-items: center">
              <span style="font-size:15px;font-family: 微软雅黑">一、单选题 ({{ paper.paperInfo.singleNum * 5 }}分)</span></div>
            <!--  lex-wrap: wrap 自动换行-->
            <div style="width: 100%;display:flex;align-items: start;flex-wrap: wrap;">
              <el-button style=" margin-left: 20px; margin-top:10px ;" plain size="mini" type="primary"
                         v-for="(question, index) of singleList" @click="scrollToSingleList(index)">
                {{ index + 1 }}
              </el-button>
            </div>
<!--            多选题-->
            <div style="margin-left:20px;width: 100%; height: 40px; display: flex;align-items: center;margin-top: 40px"><span
                style="font-size:15px;font-family: 微软雅黑">二、多选题 ({{ paper.paperInfo.multipleNum * 5 }}分)</span></div>
            <!-- flex-wrap: wrap 自动换行-->
            <div style="width: 100%;display:flex;align-items: start;flex-wrap: wrap">
              <el-button style=" margin-left: 20px; margin-top:10px ;" plain size="mini" type="primary"
                         v-for="(question, index) of multiList" @click="scrollToMultiList(index)">
                {{ index + 1 }}
              </el-button>
            </div>
<!--            填空题-->
            <div style="margin-left:20px;width: 100%; height: 40px; display: flex;align-items: center;margin-top: 40px"><span
                style="font-size:15px;font-family: 微软雅黑">三、填空题 ({{ paper.paperInfo.fillInNum * 5 }}分)</span></div>
            <div style="width: 100%;display:flex;align-items: start;flex-wrap: wrap">
              <el-button style=" margin-left: 20px; margin-top:10px ;" plain size="mini" type="primary"
                         v-for="(question, index) of fillInList" @click="scrollToFillInList(index)">
                {{ index + 1 }}
              </el-button>
            </div>
<!--            简答题-->
            <div style="margin-left:20px;width: 100%; height: 40px; display: flex;align-items: center;margin-top: 40px"><span
                style="font-size:15px;font-family: 微软雅黑">四、简答题 ({{ paper.paperInfo.textNum * 5 }}分)</span></div>
            <div style="width: 100%;display:flex;align-items: start;flex-wrap: wrap">
              <el-button style=" margin-left: 20px; margin-top:10px ;" plain size="mini" type="primary"
                         v-for="(question, index) of textList" @click="scrollToTextList(index)">
                {{ index + 1 }}
              </el-button>
            </div>
          </div>

        </div>

        <div class="footers">


        </div>


      </div>


    </el-tab-pane>

    <el-tab-pane label="标签项目" name="second">配置管理</el-tab-pane>
  </el-tabs>
</template>

<script>
import {getPaperListApi} from "@/api/paper";
import QuestionsView from "@/components/ItemBank/QuestionsView";

export default {
  name: "PaperView",
  data() {
    return {
      activeName: "first",
      paperList: [],
      //界面切换
      questionView: false,
      //所预览的当前试卷试题
      paper: {},
      singleList: [],
      multiList: [],
      fillInList:[],
      textList:[],
      preChoice: ['A', 'B', 'C', 'D'],
      //是否显示试题导航
      menuFlag: false,
      //是否显示问题答案
      answerFlag:false
    }
  },
  methods: {
    scrollToSingleList(index) {
      const questionElem = this.$el.querySelectorAll('.singleList')[index]
      questionElem.scrollIntoView({behavior: 'smooth'}) // 平滑滚动到对应singleList题目位置
    },
    scrollToMultiList(index) {
      const questionElem = this.$el.querySelectorAll('.multiList')[index]
      questionElem.scrollIntoView({behavior: 'smooth'}) // 平滑滚动到对应multiList题目位置
    },
    scrollToFillInList(index) {
      const questionElem = this.$el.querySelectorAll('.fillInList')[index]
      questionElem.scrollIntoView({behavior: 'smooth'}) // 平滑滚动到对应fillInList题目位置
    },
    scrollToTextList(index) {
      const questionElem = this.$el.querySelectorAll('.textList')[index]
      questionElem.scrollIntoView({behavior: 'smooth'}) // 平滑滚动到对应fillInList题目位置
    },
    //点击返回时重置拆出的容器
    restData() {
      this.singleList = []
      this.multiList = []
      this.fillInList = []
      this.textList = []
    },
    //由于4种题目混合排列 需要将其分别拆出 便于index编号
    getQuestionsIndex() {
      for (const question of this.paper.paperQuestionList) {
        if (question.questionType == "1") {
          this.singleList.push(question);
        }
        if (question.questionType == "2") {
          this.multiList.push(question);
        }
        if (question.questionType == "3") {
          this.fillInList.push(question);
        }
        if (question.questionType == "4") {
          this.textList.push(question);
        }
      }
      console.info("this.singleList", this.singleList)
    },
    //切换到预览试卷
    previewQuestions(row) {
      console.info("row", row)
      this.paper = row
      this.questionView = true
      this.restData()
      // console.info("singleList",this.singleList)
    },
    //点击返回 返回到试卷列表
    previewPaper() {
      this.questionView = false
    },
    getPaperList() {
      getPaperListApi().then(res => {
        if (res.data.code == 200) {
          console.info("this.PaperList", res.data.data)
          this.paperList = res.data.data
        }
      })
    }
  },
  created() {
    this.getPaperList()
  }
}
</script>

<style scoped>

.menuMain {
  margin-top: 5px;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: rgba(42, 41, 41, 0.18) 0px 1px 5px;
  overflow-y: auto;
  overflow-x: hidden;
}

.menuParam {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 55px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: rgba(125, 122, 122, 0.18) 0px 1px 5px;

}

.floatMenu {
  width: 310px;
  height: 590px;
//background-color: #0052d9;
  position: fixed;
  top: 70px;
  right: 45px;


}

span {
  color: #000000;
  font-family: 宋体
}

.demo-table-expand {
  font-size: 0px;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
  font-size: 14px;
}

.demo-table-expand el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.el-icon-plus {
  font-size: 13px;
}

.el-icon-delete-solid {
  font-size: 13px;
}

.table {
  position: absolute;
  width: 100%;
  top: 45px;
//background-color: #42b983;
}

.footers {
  //position: absolute;
  //bottom: -1px;
  width: 100%;
  height: 90px;
  background-color: #ffffff;
}

.main {
  height: 700px;
  /*background-color: #42b983;*/
}

.topBlock {
  display: flex;
  /*background-color: #42b983;*/
  height: 46px;
  align-items: center;
  justify-content: start;
  /*border-left: 1px solid #e6e6e6;*/
  /*border-right: 1px solid #e6e6e6;*/
  /*background-color: #f5f5f5;*/
  border-radius: 5px;
}



</style>